<template>
  <div class="main-navbar">
    <div :class="['left-btn' , { 'main-navbar--fold': $store.state.sidebarFold }]"
         @click="$store.state.sidebarFold = !$store.state.sidebarFold">
      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-open-menu"></use></svg>
    </div>
    <div class="right-btn" v-if="user">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img :src="user.avatar" v-if="user.avatar">
          <svg v-else class="icon-svg" aria-hidden="true"><use xlink:href="#icon-userImg"></use></svg>
          {{user.username}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item divided @click="logoutHandle">退出登录</el-dropdown-item>
            <el-dropdown-item divided @click="state.dialogVisible = true">修改密码</el-dropdown-item>
          </el-dropdown-menu>
          <el-dialog
            title="修改密码"
            v-model="state.dialogVisible"
            custom-class="dialog"
            :append-to-body="true"
            @close="closeDialog"
          >
            <el-form
              :model="state.form"
              label-width="80px"
              hide-required-asterisk
              class="form"
            >
              <el-form-item label="当前密码" required>
                <el-input v-model="state.form.old_password" autocomplete="off" type="password"></el-input>
              </el-form-item>
              <el-form-item label="新密码" required>
                <el-input v-model="state.form.password" autocomplete="off" type="password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" required>
                <el-input v-model="state.form.new_password" autocomplete="off" type="password"></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editPassword">确 定</el-button>
        </span>
            </template>
          </el-dialog>
        </template>
      </el-dropdown>
    </div>



  </div>
</template>
<script>
  import { getCurrentInstance, reactive } from 'vue'
  const state = reactive({
    form: {
      new_password: "",
      password: "",
      old_password: ""
    },
  })
import { useRouter } from 'vue-router'

import { ElMessage } from 'element-plus'
export default {
  name: 'Main-navbar',
  setup () {
    const router = useRouter()
    const  ctx  = getCurrentInstance()
    const _this = ctx.appContext.config.globalProperties;
    const user = eval('(' + localStorage.getItem('user') + ')')
    // 退出
    const logoutHandle = () => {
      _this.$confirm('退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this
          .$request({
            url: "?s=Learn.Admin.Logout",
            params: {},
          })
          .then((res) => {
              // 清除登录信息
             localStorage.removeItem("token");
             router.push({ name: 'login' })
          })

        //
      }).catch(() => {
      })
    }

    /**
     * 修改密码
     */
    const editPassword = (data) => {
      if(state.form.password!=state.form.new_password){
        ElMessage.error({
          message: "2次输入的密码不一致",
          type: "success",
        });
        return false
      }

      _this
        .$request({
          url: "?s=Learn.Admin.AlterPassword",
          params: state.form
        })
        .then((res) => {
          if (res.ret == 200) {
            ElMessage.success({
              message: "修改成功",
              type: "success",
            });
            state.dialogVisible = false
          }
        });
    }
    return {
      logoutHandle,
      user,
      editPassword,
      state
    }
  }
}
</script>
